<template>
	<view class="page box_ff">
		<view class="pad">
			<view class="title">
				{{dtl.title}}
			</view>
			<view class="">
				时间：2020-12-20
			</view>
			<view class="content">
				{{dtl.content}}
			</view>
			<view class="footer-action">
				<view class="extra_info">
					收藏数：{{dtl.like_count}}, 浏览量：{{dtl.view_count}}
				</view>
				<view  @click="deleteBtn" class="delete-btn">
					<image src="../../static/img/delt.png" class="icon-delete" mode=""></image>删除文章
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				dtl:{}
			}
		},
		methods: {
			getData(){
				uniCloud.callFunction({
					name:"queryArticleDetail",
					data:{id:this.id}
				}).then(resp=>{
					let res = resp.result;
					if(res.code==1){
						// console.log(res.data);
						this.dtl = res.data
					}else{
						this.$util.showToast(res.msg||'系统错误')
					}
				})
			},
			deleteBtn(){
				uni.showModal({
					title:'提示',
					content:'是否删除该文章？',
					success: (res) => {
						if(res.confirm){
							uniCloud.callFunction({
								name:'deleteArticle',
								data:{
									type:'delete',
									data:{
										id:this.id
									}
								}
							}).then(resp=>{
								let res = resp.result;
								if(res.code==1){
									this.$util.showToast(res.msg||'操作成功');
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1200)
								}
							})
						}
					}
				})
			},
			addViews(){
				uniCloud.callFunction({
					name:'userAction',
					data:{
						type:'views',
						data:{
							id:this.id
						}
					}
				}).then(resp=>{
					let res = resp.result;
					if(res.code==1){
						console.log("浏览量增加");
					}
				})
			},
		},
		onLoad(url) {
			if(url.id){ 
				this.id = url.id
				this.getData();
				this.addViews()
			}else{
				this.$util.showToast('参数错误')
			}
		},
		onShow(){
			// this.getData()
		}
	}
</script>

<style scoped lang="scss">
.box_ff{
	background-color: #FFFFFF;
	min-height:100vh;
}
.title{
	font-size: 30rpx;
	padding-top: 20rpx;
	font-weight: bold;
}
.content{
	margin-top: 15rpx;
	line-height: 1.4;
}
.footer-action{
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	position: fixed;
	bottom: 0;
	width: 750rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
	left: 50%;
	transform: translateX(-50%);
	box-shadow:  0 -5rpx 5rpx #f5f5f5;
	.extra_info{
		color: #666666;
	}
	.delete-btn{
		display: flex;
		align-items: center;
	}
	.icon-delete{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
}

</style>
